<template>
	<el-card>
		<el-row>
			<el-col :span="17">

				<el-table :data="tableData" style="width: 100%;" :header-cell-style="{textAlign:'center'}"
					:cell-style="{textAlign:'center'}">
					<el-table-column prop="title" label="短信" min-width="90%">
					</el-table-column>
					<el-table-column prop="fl" label="识别分类" min-width="10%">
					</el-table-column>
				</el-table>


			</el-col>
			<el-col :span="7">
				<div id="t1" style="width: 100%; height: 300px;"></div>
			</el-col>

		</el-row>

		<!-- 	<el-row style="margin-top:10px;">
			<el-button type="success" @click="drawT1">短信分类</el-button>			 
		</el-row> -->





	</el-card>
</template>


<script>
	var myChart1
	export default {
		data() {
			return {
				tableData: []
			};
		},
		mounted: function() {
			this.drawT1();
		},
		methods: {
			async drawT1() {
				//获取数据
				//传多个参数
				// let fd={
				//   k1:this.fw[0],
				//   k2:this.fw[1]
				// }
				const res = await this.$axios.get("app/v3");

				this.tableData = res.data.rs
				let tj = res.data.tj
				let x = []
				let y = []
				for (var key in tj) {
					x.push(key)
					y.push(tj[key])
				}


				if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
					myChart1.dispose(); //销毁
				}

				// 基于准备好的dom，初始化echarts实例    ,this.$echarts
				myChart1 = this.$echarts.init(document.getElementById("t1"));

				// 指定图表的配置项和数据,对象
				var option = {
					title: {
						text: "分类统计",
					},
					tooltip: {},
					legend: {
						data: ["数量"],
					},
					xAxis: {
						data: x,
					},
					yAxis: {},
					series: [{
						name: "数量",
						type: "bar",
						data: y,
					}, ],
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option);
			},
		}
	}
</script>

<style scoped>

</style>
